<template>

    <div>
      <el-menu :default-active="route.path" :default-openeds="path" router >
      <template v-for="menu in userMenu" :key="menu._id">
      
                <el-sub-menu  :index="menu.path" v-if="menu.children&&
                menu.children.length>0
                 &&menu.children[0].menuType==1">
                  <template #title>
                    <el-icon><component :is="menu.icon" /></el-icon>
                    <span>{{menu.menuName}}</span>
                  </template>
                  <tree-menu :userMenu="menu.children"/>   
                </el-sub-menu>
                 <el-menu-item v-else-if="menu.menuType==1" :index="menu.path"  class="menuItem">{{menu.menuName}}</el-menu-item>     
         </template>   
              </el-menu>  
              
            
    </div>
</template>
<script>
let div=document.querySelector('.el-sub-menu__icon-arrow')

</script>
<script setup>
import { defineProps ,watch,ref} from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const path=ref([])

watch(() => route.path,(newPath, oldPath) => {
    path.value= ['/'+route.path.split('/')[1]]

  },
  { immediate: true }
);
let props=defineProps({
  userMenu:{
    type:Array
  }
})

</script>

<style lang="scss" >
.el-menu-item{
     margin-left: 28px;
}
</style>